<template>
  <div>
    <!-- 银行信息 -->
    <basic-container shadow="hover">
      <curd-title :title="'银行信息'" />
      <avue-crud
        ref="banks"
        :table-loading="bankLoading"
        :option="bankOption"
        :data="bankList"
        v-model="bankForm"
        @on-load="onBankLoad"
        @row-save="rowBankSave"
        @row-update="rowBankUpdate"
        @refresh-change="refreshBankChange"
        @row-del="rowBankDel"
        :before-open="beforeBankOpen"
      >
        <template slot="bankNameForm">
          <el-select
            v-model="bankForm.bankName"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteBankNameMethod"
            :loading="bankNameLoading"
          >
            <el-option v-for="item in bankOptions" :key="item.id" :label="item.bankName" :value="item.bankName">
            </el-option>
          </el-select>
        </template>
        <template slot="bankCodeForm">
          <el-select
            v-model="bankForm.bankCode"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteBankCodeMethod"
            :loading="bankCodeLoading"
          >
            <el-option v-for="item in bankCodeOptions" :key="item.id" :label="item.bankCode" :value="item.bankCode">
            </el-option>
          </el-select>
        </template>
      </avue-crud>
    </basic-container>
    <!-- 近三年财务信息 -->
    <basic-container shadow="hover">
      <curd-title :title="'近三年财务信息'" />
      <avue-crud
        :table-loading="financeLoading"
        :option="financeOption"
        :data="financeList"
        v-model="financeForm"
        @on-load="onFinanceLoad"
        @row-save="rowFinanceSave"
        @row-update="rowFinanceUpdate"
        @refresh-change="refreshFinanceChange"
        @row-del="rowFinanceDel"
      >
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { bankOption, financeOption } from '@/option/tenant/supplier/finance-info'
import CurdTitle from '@/components/base/title'
import { getBankList, getBankInfo, removeBank, addBank, updateBank } from '@/api/supplier/bank'
import { getFinanceList, addFinance, removeFinance, updateFinance } from '@/api/supplier/finance'

export default {
  name: 'FinanceInfo',
  components: { CurdTitle },
  inject: ['id'],
  data() {
    return {
      bankLoading: false,
      bankList: [],
      bankOption: bankOption.call(this),
      bankForm: {},
      bankOptions: [],
      bankCodeOptions: [],
      banks: [],
      bankNameLoading: false,
      bankCodeLoading: false,
      // 近三年财务信息
      financeLoading: false,
      financeOption: financeOption.call(this),
      financeForm: {},
      financeList: []
    }
  },
  watch: {
    'bankForm.bankName'(val) {
      this.bankForm.bankCode = this.banks.filter(i => {
        return i.bankName === val ? i.bankCode : ''
      })[0].bankCode
    },
    'bankForm.bankCode'(val) {
      this.bankForm.bankName = this.banks.filter(i => {
        return i.bankCode === val ? i.bankName : ''
      })[0].bankName
    }
  },
  methods: {
    beforeBankOpen(done, type) {
      if (['edit', 'add'].includes(type)) {
        this.getBanks()
      }
      done()
    },
    getBanks() {
      getBankInfo().then(res => {
        this.banks = res.data.data
      })
    },
    remoteBankNameMethod(query) {
      if (query !== '') {
        this.bankNameLoading = true
        setTimeout(() => {
          this.bankNameLoading = false
          this.bankOptions = this.banks.filter(item => {
            return item.bankName.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.bankOptions = []
      }
    },
    remoteBankCodeMethod(query) {
      if (query !== '') {
        this.bankCodeLoading = true
        setTimeout(() => {
          this.bankCodeLoading = false
          this.bankCodeOptions = this.banks.filter(item => {
            return item.bankCode.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.bankCodeOptions = []
      }
    },
    onBankLoad() {
      this.bankLoading = true
      getBankList({ supplierId: this.id }).then(res => {
        this.bankList = res.data.data.records
        this.bankLoading = false
      })
    },
    refreshBankChange() {
      this.onBankLoad()
    },
    rowBankSave(row, done, loading) {
      addBank({ ...row, supplierId: this.id }).then(
        () => {
          this.onBankLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowBankUpdate(row, index, done, loading) {
      updateBank(row).then(
        () => {
          this.onBankLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowBankDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return removeBank(row.id)
        })
        .then(() => {
          this.onBankLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    },
    // 近三年财务信息
    refreshFinanceChange() {
      this.onFinanceLoad()
    },
    onFinanceLoad() {
      this.financeLoading = true
      getFinanceList({ supplierId: this.id }).then(res => {
        this.financeList = res.data.data.records
        this.financeLoading = false
      })
    },
    rowFinanceSave(row, done, loading) {
      addFinance({ ...row, supplierId: this.id }).then(
        () => {
          this.onFinanceLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowFinanceUpdate(row, index, done, loading) {
      updateFinance(row).then(
        () => {
          this.onFinanceLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowFinanceDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return removeFinance(row.id)
        })
        .then(() => {
          this.onFinanceLoad()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    }
  }
}
</script>

<style></style>
